<script setup>
// 导入Vue相关的响应式API和生命周期钩子
import { ref, getCurrentInstance, onMounted, reactive,nextTick } from 'vue'
import {ElMessage,ElMessageBox} from 'element-plus'
// 处理编辑按钮点击 事件的函数
const handleClick = () => {
  console.log('click') // 打印日志，后续可添加实际编辑逻辑
}

// 声明表格数据为响应式数组，用于存储用户列表数据
const tableData = ref([])

// 获取当前组件实例，用于访问全局API
const { proxy } = getCurrentInstance()

// 异步获取用户数据的函数
const getUserData = async () => {
  // 调用全局API获取用户数据，传入配置参数（包含分页和搜索条件）
  let data = await proxy.$api.getUserData(config)
  
  // 将获取到的数据转换为表格所需格式
  tableData.value = data.list.map(item => ({
    ...item, // 解构原始数据
    sexLabel: item.sex === "1" ? '男' : '女' // 转换性别编码为文字显示
  }))
  
  // 更新总条数，用于分页组件显示
  config.total = data.count
}

// 表格列配置，使用reactive使其具有响应性
const tableLabel = reactive([
  {
    prop: 'name',   // 对应数据中的字段名
    label: '姓名'    // 表格列显示的标题
  },
  {
    prop: 'age',    // 对应数据中的字段名
    label: '年龄',   // 表格列显示的标题
  },
  {
    prop: 'sexLabel', // 对应数据中的字段名（转换后的性别）
    label: '性别'     // 表格列显示的标题
  },
  {
    prop: 'birth',   // 对应数据中的字段名
    label: '出生日期', // 表格列显示的标题
    width: 200       // 列宽度
  },
  {
    prop: 'addr',    // 对应数据中的字段名
    label: '地址',    // 表格列显示的标题
    width: 400       // 列宽度
  },
])

// 搜索表单数据，用于绑定搜索输入框
const formInline = reactive({
  keyWord: '' // 搜索关键词
})

// 分页和请求配置参数
const config = reactive({
  name: '',    // 用于搜索的用户名
  total: 0,    // 数据总条数
  page: 1,     // 当前页码
})

// 处理搜索逻辑
const handleSearch = () => {
  // 将搜索框中的关键词赋值给配置项
  config.name = formInline.keyWord
  // 调用获取数据的方法，重新加载数据
  getUserData()
}

// 处理分页页码变化
const handleChange = (page) => {
  // 更新当前页码
  config.page = page
  // 重新获取对应页的数据
  getUserData()
}
//删除用户
const handleDelete = (val) => {
  ElMessageBox.confirm('确认删除该用户吗？').then(async()=>{
  await proxy.$api.deleteUser({id:val.id})

  ElMessage({
    showClose: true,
    message: '删除成功',
    type:'success'
  })
  getUserData()
  }
)
} 
// 新增用户
const action=ref('add')
const dialogVisible=ref(false)
const formUser=reactive({
  sex:"0",

})
//验证规则
const rules = reactive({
  name: [{ required: true, message: "姓名是必填项", trigger: "blur" }],
  age: [
    { required: true, message: "年龄是必填项", trigger: "blur" },
    { type: "number", message: "年龄必须是数字" },
  ],
  sex: [{ required: true, message: "性别是必选项", trigger: "change" }],
  birth: [{ required: true, message: "出生日期是必选项" }],
  addr:[{ required: true, message: '地址是必填项' }]
})
const handleClose=()=>{
  //重置表单
  dialogVisible.value=false
  proxy.$refs['userForm'].resetFields()


}
const handleCancel=()=>{
  dialogVisible.value=false
  proxy.$refs['userForm'].resetFields()

}
// 新增按钮点击事件
const handleAdd=()=>{
  dialogVisible.value=true
  action.value='add'
}
const timeFormat=(time)=>{
  var time=new Date(time)
  var year = time.getFullYear()
  var month = time.getMonth() + 1
  var date = time.getDate()
  function add(m){
    return m<10?'0'+m:m
  }
  return year+'-'+add(month)+'-'+add(date)
} 
const onSubmit=()=>{
  //先校验
  proxy.$refs['userForm'].validate(async(valid)=>{
      let res=null;

    if(valid){
      formUser.birth=/^\d{4}-\d{2}-\d{2}$/.test(formUser.birth)
      ?formUser.birth
      :timeFormat(formUser.birth)


      if(action.value==='add'){
        res=await proxy.$api.addUser(formUser)
        // console.log(formUser)
      }else{
        res=await proxy.$api.editUser(formUser)
      }
    }if(res) {
      dialogVisible.value=false
      proxy.$refs['userForm'].resetFields()
      getUserData()
    }
    else {
      ElMessage({
        showClose: true,
        message: '请输入正确内容',
        type:'error'
      });
    
    }
  })
}
// 编辑按钮点击事件
const handleEdit=(val)=>{
  action.value='edit'
  dialogVisible.value=true
  nextTick(() => {
  Object.assign(formUser,{...val,sex:''+val.sex})

  })
}
// 组件挂载完成后执行
onMounted(() => {
  // 初始加载用户数据
  getUserData()
})
</script>

<template>
  <!-- 页面头部区域：包含新增按钮和搜索表单 -->
  <div class="user-header">
    <el-button type="primary" 
    @click="handleAdd">新增</el-button>
    <!-- 行内表单，用于搜索 -->
    <el-form :inline="true" :model="formInline">
      <el-form-item label="请输入">
        <!-- 搜索输入框，双向绑定到formInline.keyWord -->
        <el-input placeholder="请输入用户名" v-model="formInline.keyWord"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 搜索按钮，点击触发搜索逻辑 -->
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- 表格和分页区域 -->
  <div class="table">
    <!-- 表格组件，数据绑定到tableData -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 动态渲染表格列，根据tableLabel配置 -->
      <el-table-column
        v-for="item in tableLabel" 
        :key="item.prop"
         :width="item.width ? item.width : 125" 
        :prop="item.prop"                     
        :label="item.label" 
                   
      />
      <!-- 列宽度，默认125  -->  
         <!-- 对应的数据字段 -->   
            <!-- 列标题 --> 
      <!-- 操作列，固定在右侧 -->
      <el-table-column fixed="right" label="Operation" min-width="120">
        <template #="scope">
          <!-- 编辑按钮 -->
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination 
      class="pager"
      background      
      layout="prev, pager, next"  
      :total="config.total"       
      size="small"                
      @current-change="handleChange"  
    
    />
     <!-- 分页按钮是否有背景色 -->
      <!-- 分页布局：上一页、页码、下一页 -->
       <!-- 总条数 -->
        <!-- 分页尺寸 -->
         <!-- 页码变化时触发的事件 -->
  </div>
  
  <el-dialog
    v-model="dialogVisible"
    :title="action == 'add' ? '新增用户' : '编辑用户'"
    width="35%"
    :before-close="handleClose"
  >
       <!--需要注意的是设置了:inline="true"，
		会对el-select的样式造成影响，我们通过给他设置一个class=select-clearn
		在css进行处理-->
    <el-form :inline="true"  :model="formUser" :rules="rules" ref="userForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formUser.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="formUser.age" placeholder="请输入年龄" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item class="select-clearn" label="性别" prop="sex">
            <el-select  v-model="formUser.sex" placeholder="请选择">
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              v-model="formUser.birth"
              type="date"
              placeholder="请输入"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item
          label="地址"
          prop="addr"
        >
          <el-input v-model="formUser.addr" placeholder="请输入地址" />
        </el-form-item>
      </el-row>
      <el-row style="justify-content: flex-end">
        <el-form-item>
          <el-button type="primary" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>

</template>

<style scoped>
  /* 头部样式：设置为弹性布局，两端对齐 */
  .user-header {
    display: flex;
    justify-content: space-between;
  } 

  /* 表格区域样式 */
  .table {
    position: relative;  /* 相对定位，用于分页组件绝对定位 */
    height: 520px;       /* 固定高度 */
    
    /* 分页组件样式 */
    .pager {
      position: absolute; /* 绝对定位 */
      right: 10px;        /* 右对齐 */
      bottom: 30px;       /* 距离底部的距离 */
    }
    
    /* 表格样式 */
    .el-table {
      width: 100%;        /* 宽度100% */
      height: 500px;      /* 固定高度 */
    }
  }
  .select-clearn  {
    display: flex;
  }
</style>